<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/examples/context.js"></script>

<style type="text/css">
</style>

</head>

<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a
						href="http://www.quizzpot.com/2009/03/el-contexto-y-la-variable-this/">El
						contexto y la variable “this”</a>
				</h2>
				<span class="smalltext">Mar 10, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/03/el-contexto-y-la-variable-this/#comments"
					title="Comment on El contexto y la variable “this”">18 Comments</a>
					| <a
					href="http://www.quizzpot.com/2009/03/the-context-and-the-variable-this/">Read
						in English</a>
				</span>
				<p>El contexto es el objeto en el que se está operando al tiempo
					de ejecución, en JavaScript tu código siempre tendrá un contexto.
					En este tema se muestra como se puede cambiar o asignar el contexto
					a métodos o funciones.</p>
			</div>
			<div class="tns">
				<div>
					<a
						href="http://www.quizzpot.com/2009/03/el-contexto-y-la-variable-this/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/03/context.jpg"
						alt="El contexto y la variable “this”"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix">
				<a
					href="http://www.quizzpot.com/wp-content/uploads/2009/03/context-src.zip"
					class="btn download"><span>Download</span></a>
			</p>
		</div>


		<h3>El video</h3>
		<p>Quiero pedir una disculpa por que no se ha realizado el video
			para este tema, pues por falta de tiempo me ha sido imposible
			hacerlo, pero creo que con la explicación escrita es suficiente para
			comprender el concepto.</p>
		<h3>El contexto</h3>
		<p>La manera como funciona el contexto es mediante la variable
			“this” la cual hace referencia al objeto en el que está contenido el
			código en ejecución. En temas anteriores se ha mostrado que el
			“global scope” está contenido en el objeto “window” por lo tanto si
			se imprime en la consola de Firebug, la variable “this” desplegará al
			objeto “window”.</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//&nbsp;this&nbsp;==&nbsp;window</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>console.debug(<span class="keyword">this</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="keyword">function</span><span>&nbsp;test(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//&nbsp;this&nbsp;==&nbsp;window</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>console.debug(<span class="keyword">this</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>test();&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">// this == window
console.debug(this);

function test(){
	// this == window
console.debug(this);
}

test();
</pre>
		<p>La función “test” ha creado un nuevo scope pero no se le ha
			especificado un contexto en cual debe ejecutarse por lo tanto toma el
			contexto global y la variable “this” dentro del scope de la función
			“test” apunta al objeto “window”, es por eso que al imprimir en la
			consola la variable “this” mostrará al objeto “window”. Ahora veamos
			un ejemplo de una función en el contexto de un objeto:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;obj&nbsp;=&nbsp;{&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;<span
						class="string">'obj'</span><span>,&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;run:&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//&nbsp;this&nbsp;==&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.value&nbsp;=&nbsp;1;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>.name);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class=""><span>};&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>obj.run();&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">var obj = {
	name: 'obj',
	run: function(){
		// this == obj
		this.value = 1;
		console.debug(this.name);
	}
};

obj.run();
</pre>
		<p>En el código anterior se muestra cómo es que mediante la
			palabra reservada “this” se hace referencia al objeto “obj”, de esta
			manera se le pueden agregar o leer propiedades al objeto en cuestión.</p>
		<h3>Cambiar el contexto de una función</h3>
		<p>Cuando se crea una función anónima o una función dentro de
			algún método del objeto “obj” adopta un nuevo contexto por lo tanto
			estas funciones están en el contexto global, examinemos el siguiente
			ejemplo:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;obj&nbsp;=&nbsp;{&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;<span
						class="string">'obj'</span><span>,&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;run:&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.value&nbsp;=&nbsp;1;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>);&nbsp;</span><span
						class="comment">//&nbsp;this&nbsp;==&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<span
						class="keyword">function</span><span>(){&nbsp;</span><span
						class="comment">//&nbsp;se&nbsp;crea&nbsp;un&nbsp;nuevo&nbsp;scope</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>);&nbsp;</span><span
						class="comment">//&nbsp;this&nbsp;==&nbsp;window</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})();&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">function</span><span>&nbsp;test(){&nbsp;</span><span
						class="comment">//&nbsp;se&nbsp;crea&nbsp;un&nbsp;nuevo&nbsp;scope</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>);&nbsp;</span><span
						class="comment">//&nbsp;this&nbsp;==&nbsp;window</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test();&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>};&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>obj.run();&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">var obj = {
	name: 'obj',
	run: function(){
		this.value = 1;
		console.debug(this); // this == obj

		(function(){ // se crea un nuevo scope
			console.debug(this); // this == window
		})();

		function test(){ // se crea un nuevo scope
			console.debug(this); // this == window
		}

		test();
	}
};

obj.run();
</pre>
		<p>Como se puede ver la variable “this” dentro de la función
			anónima y la función “test” apuntan al objeto “window” en lugar de
			apuntar al objeto “obj”, esto sucede porque estas funciones no han
			sido definidas como métodos el objeto “obj”, por lo tanto no
			pertenecen a “obj” y adoptan el contexto global. A continuación se
			muestra el mismo código anterior con una modificación en la función
			anónima y en la función “test”:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;obj&nbsp;=&nbsp;{&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;<span
						class="string">'obj'</span><span>,&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;run:&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.value&nbsp;=&nbsp;1;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>);&nbsp;</span><span
						class="comment">//&nbsp;this&nbsp;==&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>);&nbsp;</span><span
						class="comment">//&nbsp;this&nbsp;==&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).call(<span
						class="keyword">this</span><span>);&nbsp;</span><span
						class="comment">//&nbsp;se&nbsp;autoejecuta&nbsp;con&nbsp;el&nbsp;método&nbsp;call</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.test&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(){&nbsp;</span><span
						class="comment">//&nbsp;se&nbsp;define&nbsp;como&nbsp;método&nbsp;de&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>);&nbsp;</span><span
						class="comment">//&nbsp;this&nbsp;==&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.test();&nbsp;</span><span
						class="comment">//&nbsp;se&nbsp;ejecuta&nbsp;dentro&nbsp;del&nbsp;contexto&nbsp;de&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>};&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>obj.run();&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">var obj = {
	name: 'obj',
	run: function(){
		this.value = 1;
		console.debug(this); // this == obj

		(function(){
			console.debug(this); // this == obj
		}).call(this); // se autoejecuta con el método call

		this.test = function(){ // se define como método de obj
			console.debug(this); // this == obj
		}

		this.test(); // se ejecuta dentro del contexto de obj
	}
};

obj.run();
</pre>
		<p>En la función anónima se está utilizando el método “call” para
			ejecutarse a si misma y se le pasa como parámetro el objeto que
			utilizará como contexto al momento de ser ejecutada; de esta manera
			hemos cambiado el contexto global que anteriormente tenía por el
			contexto “obj”. Para la función “test” se ha cambiado la manera en
			que se definía anteriormente y ahora se ha definido como un método
			del objeto “obj”, de esta manera se ejecutará en el mismo contexto.
			El llamado de la función también ha cambiado, ya que ahora le
			anteponemos la variable “this” al método “test”.</p>
		<p>Existe otro método para cambiar el contexto de una función y es
			el método “apply” que recibe como primer parámetro el objeto que
			utilizará como contexto al ejecutarse y como segundo parámetro un
			arreglo con los parámetros que se necesiten pasar. El siguiente
			ejemplo muestra como usar esta función:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">function</span><span>&nbsp;notGlobal(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>notGlobal.apply(obj,[1,2,<span
						class="string">'3'</span><span>,</span><span class="keyword">true</span><span>]);&nbsp;&nbsp;</span></span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">function notGlobal(){
	console.debug(this);
}

notGlobal.apply(obj,[1,2,'3',true]);
</pre>
		<h3>Conclusiones</h3>
		<p>Este tema es muy importante pues es necesario comprender el uso
			de la variable “this” para los siguientes temas de este curso. El
			contexto puede ser una herramienta muy poderosa si se sabe utilizar
			correctamente, pero también puede darnos muchos dolores de cabeza si
			no se ha comprendido su uso.</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323061435680&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fel-contexto-y-la-variable-this%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fel-contexto-y-la-variable-this%2F&amp;text=El%20contexto%20y%20la%20variable%20%E2%80%9Cthis%E2%80%9D%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fel-contexto-y-la-variable-this%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fel-contexto-y-la-variable-this%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>
</body>
</html>